<template>
	<view>
		<!--service/addressmanager/addressmanager.wxml-->
		<view class="address">
			<view class="main-box">
				<scroll-view class="scroll-box z-padding-t-24" scroll-y="true" :show-scrollbar="false" enhanced="true" @scrolltolower="more">
					<view class="addressbox z-margin-b-24 z-padding-24 z-radius-16" v-for="(item,index) in list" @tap="chooseaddress(item)">
						<view class="left_box">
							<view class="middle z-margin-l-24">
								<view class="text_999 z-font-26">{{ item.province }}{{ item.city }}{{ item.district }}</view>
								<view class="z-font-w z-margin-tb-16 addressdetail">
									<view class="hidden z-font-30">{{ item.area }}{{ item.address }}</view>
									<view class="moren z-font-24 z-padding-lr-8 z-radius-8 z-margin-l-16" v-if="1===item.state">默认</view>
								</view>
								<view class="z-font-24 text_999">
									<text>{{ item.name }} {{ item.sex === 1 ? '先生' : '先生' }}</text>
									<text class="z-padding-l-24">{{ item.mobile }}</text>
								</view>
							</view>
						</view>
						<image src="../../static/service/edit.png" class="right" mode="" @tap.stop="change(item)" />
						<image src="../../static/service/del.png" class="right z-margin-l-32" mode="" @tap.stop="del(index,item.id)" />
					</view>
					<!-- <van-empty description="暂无地址" v-if="finish && list.length === 0" /> -->
					<u-empty v-if="finish && list.length === 0" mode="" icon="http://cdn.uviewui.com/uview/empty/list.png">
					</u-empty>
				</scroll-view>
			</view>

			<view class="addressbox_bottom z-padding-t-32" :style="'padding-bottom:' + safeBottom">
				<view class="btnbox" @tap="toaddnewaddress">
					<!-- <van-button type="primary" size="large">新增地址</van-button>
					 -->
					 <u-button type="primary" text="新增地址" color="#07C160"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
export default {
	data() {
		return {
			choosedid: '',
			list: [],
			finish: false,
			loading: false,
			page: 1,
			type: 0,
			safeBottom: `20px`
		};
	},
	methods: {
		toaddnewaddress() {
			this.util.skip('/service/addnewaddress/addnewaddress', {
				saveAddress: () => {
					this.reload();
				}
			});
		},
		change(e) {
			this.util.skip('/service/addnewaddress/addnewaddress?type=edit',{
					saveAddress: () => {
						this.reload();
					}
				},(res) => {
					res.eventChannel.emit('editInfo', e);
				}
			);
		},
		del(index,id) {
			uni.showModal({
				title: '温馨提示',
				content: '确定要删除这个地址吗？',
				success: (res) => {
					if (res.confirm) {
						http.post('address/handleaddress', {
							type: 'del',
							id: id
						}).then((res) => {
							this.util.toast(res.msg);
							this.list.splice(index, 1);
							this.list = this.list
						});
					}
				}
			});
		},
		chooseaddress(e) {
			if (this.type == 1) {
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('selectAddress', e);
				this.util.back();
			}
		},

		reload() {
			this.list = [],
			this.page = 1,
			this.finish = false
			this.getList();
		},
		more() {
			this.page = ++this.page
			this.getList();
		},
		getList() {
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true
			http.get('address/addresslist', {
				page: this.page
			})
				.then((res) => {
					if (res.data.length === 0) {
						this.finish = true
					}
					let arr = this.list.concat(res.data);
					this.list = arr
				})
				.finally((res) => {
					this.loading = false
				});
		}
	},
	onLoad(options) {
		if (options.type) {
			this.type = options.type;
		}
		this.reload();
	}
};
</script>

<style>
	page {
		background:#EDF1F4;
	}
.address {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}

.main-box {
	flex: 1;
	overflow: hidden;
}

.scroll-box {
	height: 100%;
}

.addressbox {
	width: 686rpx;
	background-color: #fff;
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.left_box {
	display: flex;
	align-items: center;
	flex: 1;
	overflow: hidden;
}
.choosed_img {
	width: 32rpx;
	height: 32rpx;
}
.left {
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
	border: 1rpx solid #999;
}
.middle {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.right {
	width: 40rpx;
	height: 40rpx;
}
.addressdetail {
	display: flex;
	align-items: center;
}
.moren {
	font-weight: 400;
	color: var(--maingreencolor);
	border: 1rpx solid var(--maingreencolor);
}
.addressbox_bottom {
	background-color: #fff;
	width: 100vw;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.btnbox {
	width: 686rpx;
}
.block {
	padding: 100rpx 0;
	width: 100vw;
	height: 20rpx;
}
</style>
